<template>
  <div class="staff-view">
    <Collapse v-model="val" v-if="gameList.length > 0">
      <Panel name="1">
        {{ gameList[0].name }}
        <div slot="content">
          <Tabs type="card" closable @on-tab-remove="handleTabRemove" @on-click="handleSwitchTab">
            <TabPane context-menu v-for="tag in gameList[0].tagList" :key="tag.id" :label="tag.name" :name="tag.id + ''">
              <Tag v-for="item in tagInfoList" :key="item.id" :name="item.name"
                   closable checkable
                   @on-close="handleDeleteTagInfo(item)"
                   @on-change="handleSaveTagInfo(item)">
                {{ item.name }}
              </Tag>
              <Button size="small" type="primary" @click="handleSaveTagInfo({gameTagId: tag.id})">添加</Button>
            </TabPane>
            <Button @click="handleTabsAdd(gameList[0].id)" size="small" slot="extra">增加</Button>
          </Tabs>
        </div>
      </Panel>
      <Panel v-for="(item, idx) in panelList" :key="item.id" :name="(idx + 2) + ''">
        {{ item.name }}
        <div slot="content">
          <Tabs type="card" closable @on-tab-remove="handleTabRemove" @on-click="handleSwitchTab">
            <TabPane v-for="tag in item.tagList" :key="item.id" :label="tag.name" :name="tag.id + ''">{{ tag.name }}</TabPane>
            <Button @click="handleTabsAdd(item.id)" size="small" slot="extra">增加</Button>
          </Tabs>
        </div>
      </Panel>
    </Collapse>

    <div class="empty" v-else>
      空空如也~，请先添加游戏
    </div>

    <Modal
      v-model="saveModel.show"
      :loading="saveModel.loading"
      :title="saveModel.title"
      class-name="staff-modal"
      @on-cancel="cancelModal"
      @on-ok="saveTag('tagForm')">
      <Form ref="tagForm" :model="tagForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="名称" prop="name">
          <Input v-model="tagForm.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="排序">
          <Input v-model="tagForm.sort" placeholder="请输入序号"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="saveTagModel.show"
      :loading="saveTagModel.loading"
      :title="saveTagModel.title"
      @on-cancel="cancelTagModal"
      @on-ok="saveTabInfo('tagInfoForm')">
      <Form ref="tagInfoForm" :model="tagInfoForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="ID" v-if="tagInfoForm.id > 0">
          {{tagInfoForm.id}}
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="tagInfoForm.name" placeholder="请输入名称"></Input>
        </FormItem>
        <FormItem label="父ID">
          <Input v-model="tagInfoForm.parentId" placeholder="请输入父ID"></Input>
        </FormItem>
        <FormItem label="排序">
          <Input v-model="tagInfoForm.sort" placeholder="请输入序号"></Input>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="delModel.show"
      title="提示"
      class-name="del-modal"
      @on-ok="delGameTagInfo">
      <p>确定要删除么?</p>
    </Modal>
  </div>
</template>

<script>
import Core from 'core/core'

export default {
  data() {
    return {
      Core: Core,
      loading: true,
      gameList: [],
      val: '1',

      saveModel: {
        show: false,
        title: '',
        loading: true
      },
      tagForm: {
        id: 0,
        name: '',
        sort: 0
      },
      saveTagModel: {
        show: false,
        title: '',
        loading: true
      },
      tagInfoForm: {
        id: 0,
        name: '',
        sort: 0,
        parentId: 0,
        gameTagId: ''
      },
      ruleValidate: {
        name: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ],
      },
      tagInfoList: [],
      delModel: {
        show: false,
        item: {}
      }
    }
  },
  mounted() {
    this.getGameList()
  },
  computed: {
    panelList() {
      if (this.gameList.length > 0) {
        return this.gameList.slice(1)
      }
      return []
    }
  },
  methods: {
    getGameList() {
      this.gameList = []
      Core.Api.Game.listWithTag({})
        .then(res => {
          this.gameList = res.list
          if (this.gameList.length > 0 && this.gameList[0].tagList.length > 0) {
            this.handleSwitchTab(this.gameList[0].tagList[0].id)
          }
        })
    },
    handleTabsAdd(gameId) {
      this.saveModel.title = '添加筛选标签'
      this.tagForm = {
        id: 0,
        name: '',
        sort: 0,
        gameId: gameId
      }
      this.saveModel.show = true
    },
    handleTabRemove(id) {
      Core.Api.GameTag.delete({id: id})
        .then(res => {
          this.getGameList()
        })
    },
    handleSwitchTab(id) {
      this.loading = true
      Core.Api.GameTagInfo.list({gameTagId: id})
        .then(res => {
          this.loading = false
          this.tagInfoList = res.list
        })
    },
    handleDeleteTagInfo(item) {
      this.delModel.item = item
      this.delModel.show = true
    },
    delGameTagInfo() {
      Core.Api.GameTagInfo.delete({id: this.delModel.item.id})
        .then(res => {
          this.handleSwitchTab(this.delModel.item.gameTagId);
        })
    },
    handleSaveTagInfo(item) {
      this.saveTagModel.title = item.id ? '编辑标签' : '添加标签'
      this.tagInfoForm = {
        id: item.id ? item.id : 0,
        name: item.id ? item.name : '',
        gameTagId: item.gameTagId,
        parentId: item.id ? item.parentId : 0,
        sort: item.id ? item.sort : 0
      }
      this.saveTagModel.show = true
    },
    cancelModal() {
      this.$refs.tagForm.resetFields()
    },
    cancelTagModal() {
      this.$refs.tagInfoForm.resetFields()
    },
    saveTag(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let data = {
            id: this.tagForm.id,
            name: this.tagForm.name,
            sort: this.tagForm.sort,
            gameId: this.tagForm.gameId
          }

          Core.Api.GameTag.save(data)
            .then(() => {
              this.$Message.success('添加成功！')
              this.getGameList()
              this.saveModel.show = false
            })
            .catch(err => {
              this.saveModel.loading = false
              setTimeout(() => {
                this.saveModel.loading = true
              })
            })
        } else {
          this.saveModel.loading = false
          setTimeout(() => {
            this.saveModel.loading = true
          })
        }
      })
    },
    saveTabInfo(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let id = this.tagInfoForm.id;
          let data = {
            id: id,
            name: this.tagInfoForm.name,
            sort: this.tagInfoForm.sort,
            gameTagId: this.tagInfoForm.gameTagId,
            parentId: this.tagInfoForm.parentId
          }

          Core.Api.GameTagInfo.save(data)
            .then(() => {
              this.$Message.success(id > 0 ? '修改成功！' : '添加成功！')
              this.handleSwitchTab(this.tagInfoForm.gameTagId)
              this.saveTagModel.show = false
            })
            .catch(err => {
              this.saveTagModel.loading = false
              setTimeout(() => {
                this.saveTagModel.loading = true
              })
            })
        } else {
          this.saveTagModel.loading = false
          setTimeout(() => {
            this.saveTagModel.loading = true
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.empty {
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  padding: 16px;
}
</style>
